<template>
  <view class="bg-white" style="height: 100vh">
    <view>
      <image
        src="https://img10.360buyimg.com/babel/s700x360_jfs/t25855/203/725883724/96703/5a598a0f/5b7a22e1Nfd6ba344.jpg!q90!cc_350x180"
        class="slide-image"
        style="height: 120px; width: 100%"
      />
    </view>
    <view class="fixed-title">
      <text class="title"> FM团队1 </text>
      <br />
      <text class="desc"> 团队排名第100，距离第1只差99！ </text>
    </view>
    <view class="fab-message">
      <view class="cuIcon-message" style="font-size: 30px">
        <view class="cu-tag badge">1</view>
      </view>
    </view>
    <AtNoticebar icon="volume-plus">
      这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏
    </AtNoticebar>
    <view class="three-tab flex padding-top">
      <template v-for="(item, index) in tabs" :key="item.id">
        <view
          class="cu-btn round margin-left"
          :class="[
            isActiveTab === item.id ? 'bg-blue' : 'line-blue',
            index === tabs.length - 1 ? 'margin-right' : '',
          ]"
          style="flex: 1"
          @tap="switchTab(item.id)"
          ><text :class="item.icon ? 'cuIcon-' + item.icon : ''"></text
          >{{ item.name }}
        </view>
      </template>
    </view>
    <view class="category-card padding">
      <ChannelTab v-if="isActiveTab === 1" />
    </view>
  </view>
</template>
<script lang="ts">
import './index.scss'
import { defineComponent, reactive, ref } from 'vue'
import { AtFab, AtNoticebar } from 'taro-ui-vue3/lib'
import ChannelTab from './channelTab.vue'

export default defineComponent({
  components: {
    AtFab,
    AtNoticebar,
    ChannelTab,
  },
  setup() {
    const tabs = reactive([
      { id: 1, name: '渠道', icon: '' },
      { id: 2, name: 'CASE', icon: '' },
      { id: 3, name: '沉淀', icon: '' },
    ])

    const isActiveTab = ref(1)

    const switchTab = (id: number) => {
      if (isActiveTab.value === id) {
        return
      }
      isActiveTab.value = id
    }

    return { tabs, switchTab, isActiveTab }
  },
})
</script>
